<style lang="scss">
.detail-menu {
}
</style>

<template>
  <div v-show="show" class="detail-menu bg-white">
    <div
      class="relative"
      :style="relStyle"
      @mouseenter="handleEventMouseEnter"
      @mouseleave="handleEventMouseLeave"
    >
      <div class="relative m-auto" :style="innerStyle">
        <div>
          <div
            class="relative w-full"
            style="max-width: 1220px; margin-left: 136px;"
          >
            <div
              class="absolute top left w-full fl fl-justify-between p-40"
              style="max-width: 1000px; opacity: 0; transform: translate(-15px, 0px); visibility: hidden; pointer-events: none;"
            >
              <div class="m-r-50" />
              <div class="m-r-50" />
              <div class="m-r-50" />
            </div>
          </div>
          <div
            class="absolute left top"
            style="pointer-events: none; border: 1px solid rgba(179, 187, 193, 0.25); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px; margin: -10px -15px; width: 207px; height: 66px; transform: translate(176px, 116px); opacity: 0;"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailMenu",
  model: {
    prop: "show",
    event: "visible-change"
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      relStyle: {
        boxShadow: "rgba(0, 0, 0, 0.2) 0 4px 7px 0",
        transition:
          "opacity 100ms ease 0s,transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s",
        opacity: "0"
      },
      innerStyle: {
        height: 0,
        transition: "height 1ms ease 210ms"
      }
    }
  },
  watch: {},
  methods: {
    handleEventMouseEnter() {},
    handleEventMouseLeave() {
      this.$emit("on-visible-change", false)
    }
  }
}
</script>
